上幾篇介紹完接case的心得和網站規劃
今天要來寫點程式囉 !
可以跟著下面範例 都很好上手哦

歡迎來到放學後的網頁生活 ~

本篇想跟各位分享ES6，全名ECMAScript 6，於 2015 年 6 月正式發佈。 ES6 除了在功能上更為成熟穩定之外，也可以簡化過去的寫法，在本文我會做一些比較，讓各位知道差異的地方，那讓我們看下去吧~~

Inside ES6

JS 每年都有持續在更新，以ES6做為一個分水嶺經歷較大的更新，以下為本文目錄：

1. Let & Var & Const
2. String Template
3. Arrow Function
4. Destructure assignment
5. Spread operator
6. Inheritance

Let & Var & Const

let vs var

比較：let 在函式或條件式內外，變數不會受到影響，Var 會

Example of Var

var a = 5;

for(var a =1;a<10;a++){
    var b = 10;
    console.log(a);
}
console.log('a',a);
console.log('b',b);

output => a 10 (被迴圈內給改變)
output => b 10

If use let ?

let a = 5;
for(let a =1;a<10;a++){
let b = 10;
console.log(a);
}
console.log('a',a);
console.log('b',b);

output==>a 5 
output==>b X => 會有error 因外部沒有宣告

再來一個範例

for ( let a = 1 ; a<10 ; a++ ){
setTimeout(function(){
       console.log(a);
      } , a*1000 );
}

output==>1..2..3..4....9(皆間隔一秒)

let VS const

比較：宣告的變數若為const則後面不可再做更改，但 let 可以

Ex:
let a = 1;
const b = 1;

a=2;
b=2;

output ==> Assignment to constant variable

但...還是有意外!

//如果是物件的話就可以

const a = [1,2,3,4,5];
a[5] = 6;
console.log(a);

const 這樣會 error 嗎? 不會!

output => [1,2,3,4,5,6]
//因為這邊的a是by reference非by value ( 不是單純數字、文字 )

再來個練習

const person={
name:'David'
}

person.age = 20;

output=>{name:"David",age:20}
//一樣會成功哦，同理如上

經過這些小範例，應該更清楚這三個的差別囉，自己可以試著寫寫看哦

String Template

在 ES6 我們多了一個很方便的模版字符串（template literal），什麼情況下會用到呢?

1. 在 JS 中放入 HTML
2. 很長的字串且包含換行
3. 字串連結變數

首先如果不是ES6的話，我們想要嵌入變量

var david = 'David';

function hello(name){
console.log('Hello'+name);
}

hello(david);

那在ES6最關鍵的就是內部改為 ` 號(在鍵盤左上角)
並透過 $ { ... } 這樣的方式，可以嵌入變量或任何的表達式

var david = 'David';

function hello(name){
console.log(`Hello ${name}`);
}

hello(david);

以上兩者都會有一樣的output哦~ Hello david

你以為只有這樣嗎

倘若是字串相接的話會方便許多
先回憶一下過去我們怎麼做字串相接

//非ES6
var paragraph = 'abc bcd\n';
paragraph += 'efg hij\n';
paragraph += 'klm nop\n';
console.log(paragraph);

output=>
abc bcd
efg hij
klm nop

是否覺得很多餘呢
那在ES6可以很直覺的寫在一起 !

//ES6
const paragraph = `
abc bcd
efg hij
klm nop
`
console.log(paragraph);

output=>
abc bcd
efg hij
klm nop
//會發現結果相同哦!!

不只如此，還記得怎麼加入HTML呢 ?

假設我們想在Header內建一個div裡面存自己的照片，過去可以這樣寫：

//非ES6
let HTMLcontent = '<header>\n'+
                  '<div class="banner">\n'+
                  '<img src="dayo.jpg"\n'+
                  '</div>\n'+
                  '</header>'

那像剛剛上面那樣，是不是就可以直接省略?

let HTMLcontent = `
<header>
    <div class='banner'>
        <img src="dayo.jpg>
    </div>
</header>
`

直接在前後加上 ` 的符號裡面就像平常寫HTML一樣就好囉，真的超方便阿 !

各位同學可以複習上面的內容，希望能有感覺，將過去的扣改寫哈哈
明天會繼續介紹Arrow Function、Destructure assignment ~

下課囉 ~ 請鎖定 ?放學後的網頁生活